<template>
  <div class="changePassword-background">
    <div class="changePassword">
      <div class="changePassword-title">修改密码</div>
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input v-model="form.oldPassword" type="password" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="form.newPassword" type="password" />
        </el-form-item>
        <el-form-item label="再次输入" prop="passwordAgain">
          <el-input v-model="form.passwordAgain" type="password" />
        </el-form-item>
        <el-form-item style="margin: 50px 0">
          <el-button type="primary" @click="onSubmit('form')">确定</el-button>
          <el-button @click="onCancel()">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { updatePassWord } from '@/api/user'
export default {
  name: 'ChangePassword',
  data() {
    const validateOldPass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入原密码'))
      }
      callback()
    }
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (value.length < 6) {
        return callback(new Error('密码不得小于6位'))
      } else {
        if (this.form.checkPass !== '') {
          this.$refs.form.validateField('checkPass')
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      form: {
        oldPassword: '',
        newPassword: '',
        passwordAgain: ''
      },
      rules: {
        oldPassword: [
          { required: true, validator: validateOldPass, trigger: 'blur' }
        ],
        newPassword: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        passwordAgain: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ]
      }

    }
  },
  methods: {

    onSubmit(form) {
      const that = this
      const sendDate = { oldPass: that.form.oldPassword, newPass: that.form.newPassword }
      that.$refs[form].validate((valid) => {
        if (valid) {
          updatePassWord(sendDate).then(response => {
            if (response.result === 1) {
              that.$message({
                message: '修改成功',
                type: 'success'
              })
              this.$router.push('/console')
            } else {
              that.$message({
                message: '修改失败',
                type: 'warning'
              })
            }
          })
        } else {
          return false
        }
      })
    },
    onCancel() {
      const that = this
      that.$router.push({ path: that.redirect || '/console' })
    }
  }
}
</script>

<style >
.changePassword-background{
  min-height: 100%;
  overflow: hidden;
}
.changePassword{
  width: 450px;
  margin: 60px auto 0 auto;
}
.changePassword-title{
  height: 60px;
  text-align: center;
  font-size: 26px;
  font-weight: bold;
}
</style>
